<template>
    <div>
        <!--  1.标题-->
        <h1>进行密码找回</h1>
        <!--  2.表单-->
        <div>
            <van-form>
                <van-cell-group inset>
                    <van-field
                        v-model="user.phone"
                        label="手机号"
                        placeholder="请输入手机号"
                        :rules="[{ required: true, message: '请填写手机号' }]"
                    />
                </van-cell-group>
                <van-cell-group inset>
                    <van-field
                        v-model="user.code"
                        center
                        clearable
                        label="验证码"
                        placeholder="请输入短信验证码"
                    >
                        <template #button>
                            <van-button size="small" @click="sendCode" type="primary">发送验证码</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <van-cell-group inset>
                    <van-field
                        v-model="user.password"
                        type="password"
                        label="新密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                </van-cell-group>
                <van-cell-group inset>
                    <van-field
                        v-model="password2"
                        type="password"
                        label="确认密码"
                        @change="checkPassword"
                        placeholder="请再次输入密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="button" @click="add">
                        密码找回
                    </van-button>
                </div>
            </van-form>

        </div>
        <!--  3.左右 跳转-->
        <div>
            <router-link style="float: left" to="/login">登录账号</router-link>
            <router-link style="float:right;" to="/register">注册账号</router-link>
        </div>
    </div>
</template>

<script>
import {showToast} from "vant";

export default {
    name: "FindPass",
    data(){
        return{
            user:{},
            password2:""
        }
    },
    methods:{
      sendCode(){
          this.axios.get("/api/sms/sendfcode.do?phone="+this.user.phone).then((res) =>{
              if (res.data.code==0){
                  showToast("发送验证码成功，注意查收。")
              }else {
                  showToast("发送短信失败")
              }
          })
      },
        checkPassword(){
            //校验2次密码是否一致
            if(this.user.password==this.password2){
                showToast("2次密码一致！");
            }else {
                showToast("亲，2次密码不一致");
            }
        },
        add(){
            this.axios.post("/api/user/findpass.do",this.user).then((res) =>{
                if (res.data.code==0){
                    showToast("密码已更新。")
                    this.$router.push("/login");
                }else{
                    showToast("密码找回失败，请咨询客服处理。")
                }

            })
        }
    }
}
</script>

<style scoped>

</style>
